<template>
	<view class="">
		<view class="linear"></view>
		<view class="listbg">
			<view class="" style="overflow: hidden;">
				<!-- 正常订单 -->
				<view class="addressbox topbox" v-if="fromData.task_type == 2">
					<view class="add_l">
						<view class="qu">取</view>
						<text>|</text>
						<text>{{fromData.juli || '0'}}m</text>
						<text>|</text>
						<view class="">收</view>
					</view>
					<view class="add_r">
						<view class=""
							@click.stop="getmap(fromData.groupOrder.orderListField[0].merchantField.marketField.latitude,fromData.groupOrder.orderListField[0].merchantField.marketField.longitude)">
							<text>{{fromData.groupOrder.orderListField[0].merchantField.marketField.address || '菜市场地址获取失败'}}</text>
							<image src="../static/icon_280@2x.png" mode=""></image>
						</view>
						<view class="" @click.stop="getmap(fromData.groupOrder.latitude,fromData.groupOrder.longitude)">
							<text>{{fromData.groupOrder.user_address || '收货地址获取失败'}}</text>
							<image src="../static/icon_280@2x.png" mode=""></image>
						</view>
					</view>
				</view>
				<!-- 退换货订单 -->
				<view class="addressbox topbox" v-if="fromData.task_type == 3 || fromData.task_type == 5">
					<view class="add_l">
						<view class="qu">取</view>
						<text>|</text>
						<text>{{fromData.juli || '0'}}m</text>
						<text>|</text>
						<view class="">收</view>
					</view>
					<view class="add_r" v-if="fromData.task_type == 3">
						<view class="" @click.stop="getmap(fromData.groupOrder.latitude,fromData.groupOrder.longitude)">
							<text>{{fromData.groupOrder.user_address || '收货地址获取失败'}}</text>
							<image src="../static/icon_280@2x.png" mode=""></image>
						</view>
						<view class=""
							@click.stop="getmap(fromData.groupOrder.orderListField[0].merchantField.marketField.latitude,fromData.groupOrder.orderListField[0].merchantField.marketField.longitude)">
							<text>{{fromData.groupOrder.orderListField[0].merchantField.marketField.address || '菜市场地址获取失败'}}</text>
							<image src="../static/icon_280@2x.png" mode=""></image>
						</view>
					</view>
					<view class="add_r" v-else>
						<view class=""
							@click.stop="getmap(fromData.groupOrder.orderListField[0].merchantField.marketField.latitude,fromData.groupOrder.orderListField[0].merchantField.marketField.longitude)">
							<text>{{fromData.groupOrder.orderListField[0].merchantField.marketField.address || '菜市场地址获取失败'}}</text>
							<image src="../static/icon_280@2x.png" mode=""></image>
						</view>
						<view class="" @click.stop="getmap(fromData.groupOrder.latitude,fromData.groupOrder.longitude)">
							<text>{{fromData.groupOrder.user_address || '收货地址获取失败'}}</text>
							<image src="../static/icon_280@2x.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="pstime">
					<view class="lring"></view>
					<view class="rring"></view>
					<view class="time">
						<text>预约配送时间 : </text>
						<text
							style="display: block; margin-left: 10rpx;">{{(fromData.groupOrder.delivery_day || '--:--:--')}}</text>
						<text
							style="margin-left: 10rpx;">{{(fromData.groupOrder.delivery_time_scope || '--:--:--')}}</text>
					</view>
				</view>
			</view>
			<!-- 买手信息 -->
			<view class="" v-show="fromData.buyerInfo">
				<view class="usualtitle">
					<text>买手信息</text>
				</view>
				<view class="buyer">
					<image :src="fromData.buyerInfo.avatar" mode=""></image>
					<view class="">
						<view class="">
							<text>{{fromData.buyerInfo.real_name || '暂无昵称'}}</text>
						</view>
						<view class="">
							<text>{{fromData.buyerInfo.phone || '暂无手机号'}}</text>
						</view>
					</view>
					<view class="call" @click="tel(fromData.buyerInfo.phone)">联系买手</view>
				</view>
			</view>
	<view class="" v-show="fromData.groupOrder">
				<view class="usualtitle">
					<text>用户信息</text>
				</view>
				<view class="buyer">
					<!-- <image :src="fromData.groupOrder.real_name" mode=""></image> -->
					<view class="">
						<view class="">
							<text>{{fromData.groupOrder.real_name || '暂无昵称'}}</text>
						</view>
						<view class="">
							<text>{{fromData.groupOrder.user_phone || '暂无手机号'}}</text>
						</view>
					</view>
					<view class="call" @click="tel(fromData.groupOrder.user_phone)">联系用户</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<!-- 下面的商品信息 -->
			<view class="goodslist" style="padding-bottom: 30rpx; margin-top: 30rpx;">
				<!-- <view :key="index" v-for="(item,index) in fromData.groupOrder.orderListField" v-if="isTrue ? (index == 0) : true"> -->
				<view :key="$u.guid()" v-for="(item,index) in fromData.groupOrder.orderListField">
					<!-- <view class="usualtitle" v-if="! fromData.RefundInfo || fromData.RefundInfo.mer_ids.indexOf(item.mer_id) != -1">
						<text>{{item.merchantField.marketField.mar_name || '暂无'}}-{{item.merchantField.mer_name || '暂无'}}</text>
					</view> -->
					<view class="usualtitle" v-if="fromData.RefundInfo == null || kao(item.mer_id)">
						<text>{{item.merchantField.marketField.mar_name || '暂无'}}#-{{item.merchantField.mer_name || '暂无'}}</text>
					</view> 
					<template v-if="fromData.task_type == 2">
						<!-- <view class="goodsbg" v-for="(ele,i) in item.orderProduct" :key="i" v-if="ele.is_barter ==0"> -->
						<view class="goodsbg" v-for="(ele,i) in item.orderProduct" :key="$u.guid()">
							<view class="" style="display: flex;">
								<image :src="ele.cart_info.product.image" mode=""></image>
								<view class="itemrules" style="flex: 1;box-sizing: border-box;">
									<view class="">
										<text style="width: 200rpx;">
											{{ele.cart_info.product.store_name}}
										</text>
										<text>
											￥{{ele.cart_info.productAttr.ot_price || '0'}}
										</text>
										<text>￥{{ele.cart_info.productAttr.price || '0'}}</text>
									</view>
									<text style="color: red;">
										{{ele.cart_info.productAttr.sku || ''}}
									</text>
									<text>x{{ele.refund_num || '0'}}</text>
								</view>
							</view>
						</view>
					</template>
					<template v-if="fromData.task_type == 3 || fromData.task_type == 5">
						<view class="goodsbg" v-for="(ele,i) in item.orderProduct" :key="$u.guid()"
							v-if="fromData.currentRefundOrderProudctIds.indexOf(ele.order_product_id) != -1">
							<view class="">
								<image :src="ele.cart_info.product.image" mode=""></image>
								<view class="itemrules">
									<text>{{ele.cart_info.product.store_name}}</text>
									<view class="">
										<text style="color: red;"> {{ele.cart_info.productAttr.sku || ''}}</text>
										<text
											v-if="ele.cart_info.productAttr.ot_price > 0">￥{{ele.cart_info.productAttr.ot_price || '0'}}</text>
										<text>￥{{ele.cart_info.product.price || '0'}}</text>
									</view>
									<!-- <text>{{ele.buyer_remarks || '暂无'}}</text> -->
									<template v-for="refundProduct in fromData.RefundInfo.refundProduct">
										<text
											v-if="refundProduct.order_product_id == ele.order_product_id">x{{refundProduct.refund_num || '0'}}</text>
									</template>
								</view>
								<!-- <view class="priceipt">售后退/换货处理中</view> -->
							</view>
						</view>
					</template>
				</view>
				<view @click="changeIs" class="openline">
					<text v-if="fromData.RefundInfo">共{{fromData.RefundInfo.refund_num || '0'}}件</text>
					<text v-else>共{{fromData.groupOrder.total_num || '0'}}件</text>
					<image v-if="isTrue" src="../static/icon_297@2x.png" mode=""></image>
					<image v-else src="../static/icon_298@2x(1).png" mode=""></image>
				</view>

				<view class="realpay">
					<view class="" style="align-items: center;">配送费<text>
							￥{{fromData.groupOrder.pay_postage || '0'}}</text></view>
					<!-- <view class="" v-if="fromData.RefundInfo">小计￥<text>{{fromData.m_ || '0'}}</text></view>
					<view class="" v-else>小计￥<text>{{fromData.groupOrder.pay_price || '0'}}</text></view> -->
					<view class="" v-if="fromData.RefundInfo">小计￥<text>{{fromData.RefundInfo.refund_price || '0'}}</text></view>
					<view class="" v-else>小计￥<text>{{fromData.groupOrder.pay_price || '0'}}</text></view>
				</view>
			</view>
			<view class="">
				<view class="usualtitle">
					<text>备注</text>
				</view>
				<view class="beizu" v-if="fromData.RefundInfo">
					<view class=""><text>{{fromData.RefundInfo.mark || '暂无备注'}}</text></view>
				</view>
				<view class="beizu" v-else>
					<view class=""><text>{{fromData.groupOrder.orderListField[0].mark || '暂无备注'}}</text></view>
				</view>
			</view>
			<view class="" v-if="fromData.RefundInfo">
				<view class="usualtitle">
					<text>申请凭证</text>
				</view>
				<view class="beizu">
					<template v-for="imagesUrl in fromData.RefundInfo.images">
						<u-image :src="imagesUrl" mode="" width='70' height='70'></u-image>
					</template>

				</view>
			</view>
			<view class="">
				<view class="usualtitle">
					<text>订单信息</text>
				</view>
				<view class="beizu">
					<view class="">
						<text>订单编号: {{fromData.groupOrder.group_order_sn || '暂无'}}</text>
						<text @click="copy(fromData.groupOrder.group_order_sn)">复制</text>
					</view>
					<view class=""><text>下单时间: {{fromData.groupOrder.pay_time || '暂无下单时间'}}</text></view>

				</view>
			</view>
		</view>
		<view class="" style="height: 200rpx;"></view>
		<!-- 	<view class="recive">接受任务</view>
		<view class="recive">取货完成</view>
		<view class="recive">取货完成</view>
		<view class="recive tworecive">
			<view class="">联系客服/一键拨号</view>
			<view class="">配送完成</view>
		</view> -->



		<template v-if="fromData.task_type == 2">
			<!-- 新任务 -->
			<view v-if="fromData.status == 1" @click.stop="getTask(fromData.id)" class="recive">接受任务</view>
			<!-- 配送中 -->
			<view class="recive tworecive" v-if="fromData.status == 2">
				<view class="call" @click.stop="tel(fromData.ServiceInfo.phone)">联系客服/一键拨号</view>
				<view class="" @click.stop="distribution(fromData.id)">配送完成</view>
			</view>
			<view v-if="fromData.status == 5" @click.stop="getGoods(fromData.id)" class="recive">取货完成</view>
			<view v-if="fromData.status == 3" @click.stop="lookComment(fromData)" class="recive">查看评论</view>
		</template>
		<!-- 退换货订单 -->
		<template v-if="fromData.task_type == 3 || fromData.task_type == 5">
			<view v-if="fromData.status == 2" @click.stop="distribution(fromData.id)" class="recive">配送完成</view>
			<view v-if="fromData.status == 5" @click.stop="getGoods(fromData.id)" class="recive">取货完成</view>
			<view v-if="fromData.status == 1" @click.stop="getTask(fromData.id)" class="recive">接受任务</view>
			<view class="recive tworecive" v-if="fromData.status == 2">
				<view class="call" @click.stop="tel(fromData.ServiceInfo.phone)">联系客服/一键拨号</view>
				<view class="" @click.stop="distribution(fromData.id)">配送完成</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fromData: {
					groupOrder: {
						orderListField: []
					}
				},
				moneyshow: false,
				isTrue: true, //控制展示数量
				realprice: ''
			}
		},
		onLoad(e) {
			if (e.id) {
				console.log(e.id, 'e.id');
				this.id = e.id;
			}
			//获取详情
			this.getDetail();
		},
		onShow() {},
		methods: {
			kao(mer_id){
				if(this.fromData.RefundInfo == null){
					 return false
				}
				if(Array.isArray(this.fromData.RefundInfo.mer_ids) && this.fromData.RefundInfo.mer_ids.indexOf(mer_id)){
					return true
				}
				return false
			},
			//最下面功能
			// 查看评论
			lookComment(item) {
				let data = JSON.stringify(item);
				uni.setStorageSync('data66', data);
				uni.navigateTo({
					url: '../mine/evaluate_look'
				})
			},
			//配送完成
			distribution(task_id) {
				uni.showModal({
					title: '提示',
					content: '确认配送完成吗?',
					success: res => {
						if (res.confirm) {
							this.$request('rider/finish', {
								task_id,
							}, 'POST').then(ele => {
								console.log(ele, 'ele');
								if (ele.status == 200) {
									this.titindex = 3;
									this.getDetail();
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 接受新任务
			getTask(task_id) {
				uni.requestSubscribeMessage({
					tmplIds: ['8weYiNMM30JxdGsHWDAVR8OZmtUFS0NtYHnmITPa_J4'],
					success:re=> {
						uni.showModal({
							title: '提示',
							content: '确认接单吗?',
							success: res => {
								if (res.confirm) {
									this.$request('rider/accept', {
										task_id,
									}, 'POST').then(ele => {
										console.log(ele, 'ele');
										if (ele.status == 200) {
											this.titindex = 5;
											this.getDetail();
										}
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					},
					fail:err=> {
						uni.showModal({
							title: '提示',
							content: '确认接单吗?',
							success: res => {
								if (res.confirm) {
									this.$request('rider/accept', {
										task_id,
									}, 'POST').then(ele => {
										console.log(ele, 'ele');
										if (ele.status == 200) {
											this.titindex = 5;
											this.getDetail();
										}
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})
				
				
			
				
				
			},
			//取货完成
			getGoods(task_id) {
				uni.showModal({
					title: '提示',
					content: '确认取货完成吗?',
					success: res => {
						if (res.confirm) {
							this.$request('rider/pickUp', {
								task_id,
							}, 'POST').then(ele => {
								console.log(ele, 'ele');
								if (ele.status == 200) {
									this.titindex = 2;
									this.getDetail();
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			changeIs() {
				this.isTrue = !this.isTrue;
			},
			// 复制
			copy(text) {
				uni.setClipboardData({
					data: text + '',
					success: function() {
						console.log('a');
					}
				});
			},
			tel(pnone) {
				uni.makePhoneCall({
					phoneNumber: `${pnone}` //仅为示例
				});
			},
			// 打开地图导航
			getmap(latitude, longitude) {
				console.log(latitude, longitude, '经纬度')
				uni.openLocation({
					latitude: latitude * 1,
					longitude: longitude * 1,
					success: function() {
						console.log('success');
					}
				});
			},
			//获取详情
			getDetail() {
				this.$request('rider/task_details', {
					id: this.id,
				}, 'GET').then(res => {
					console.log(res, '详情res');
					if (res.status == 200) {
						this.fromData = res.data;
						this.fromData.m_ = 0
						this.fromData.currentRefundOrderProudctIds = [] //该任务被退换货的
						this.fromData.proudctNum = 0
						if (this.fromData.RefundInfo) {
							this.fromData.RefundInfo.refundProduct.forEach(refundProduct => {
								this.fromData.proudctNum += refundProduct.refund_num
								this.fromData.currentRefundOrderProudctIds.push(
									refundProduct.order_product_id)
							})
							this.fromData.groupOrder.orderListField.forEach(order => {
								order.orderProduct.forEach(proudct => {
									if (this.fromData.currentRefundOrderProudctIds.indexOf(
											proudct.order_product_id) != -1)
										this.fromData.m_ += Number(proudct.product_price)
								})
							})



						} else {
							this.fromData.m_ = this.fromData.groupOrder.pay_price
						}
						this.getDistance();
						//骑手任务 
						if (this.fromData.task_type == 2) {
							switch (res.data.status * 1) {
								case 1:
									return uni.setNavigationBarTitle({
										title: "新任务"
									});
								case 2:
									return uni.setNavigationBarTitle({
										title: "配送中"
									});
								case 3:
									return uni.setNavigationBarTitle({
										title: "已完成"
									});
								case 4:
									return uni.setNavigationBarTitle({
										title: "已取消"
									});
								case 5:
									return uni.setNavigationBarTitle({
										title: "待取货"
									});
							}
						}
						if (res.data.task_type * 1 == 3 || res.data.task_type * 1 == 5) {
							switch (res.data.status * 1) {
								case 3:
									return uni.setNavigationBarTitle({
										title: "售后退/换货-已完成"
									});
								case 2:
									return uni.setNavigationBarTitle({
										title: "售后退/换货-处理中"
									});
								case 5:
									return uni.setNavigationBarTitle({
										title: "售后退/换货-待处理"
									});
							}
						}

					}
				})
			},
			//经纬度算距离
			async getDistance() {
				console.log('计算距离');
				let a = await new Promise((resolve, reject) => {
					uni.request({
						url: `https://restapi.amap.com/v4/direction/bicycling?origin=${this.fromData.groupOrder.orderListField[0].merchantField.marketField.longitude},${this.fromData.groupOrder.orderListField[0].merchantField.marketField.latitude}&destination=${this.fromData.groupOrder.longitude},${this.fromData.groupOrder.latitude}&key=c858b6921758e3f3400070929386564c`,
					}).then((response) => {
						console.log(response[1].data.data.paths[0].distance, 'ss');
						this.$set(this.fromData, 'juli', response[1].data.data.paths[0]
							.distance * 1);
					}).catch(error => {})
				})
			},
			getrealprice() {
				this.moneyshow = true
			},
			sure() {
				this.moneyshow = false
			},

		}
	}
</script>

<style>
	.pstime {
		height: 84rpx;
		width: 100%;

		/* margin-left: 30rpx; */
		position: relative;
	}

	.pstime .lring {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background: #F5F5F5;
		position: absolute;
		left: -14rpx;
		top: -14rpx;
	}

	.pstime .rring {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background: #F5F5F5;
		position: absolute;
		right: -14rpx;
		top: -14rpx;
	}

	.pstime .time {
		border-top: 1rpx solid #EEEEEE;
		display: flex;
		align-items: center;
		width: 630rpx;
		height: 100%;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		margin-left: 30rpx;
	}

	.pstime .time text {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #F45E14;
	}

	.topbox {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.qu {
		color: #F45E14 !important;
		background: #FFE8DC !important;
	}

	.addressbox {
		display: flex;
		width: 690rpx;
		margin-left: 20rpx;
	}

	.add_r {
		flex: 1;
		margin-left: 12rpx;
	}

	.add_r>view {
		display: flex;
	}

	.add_r>view:nth-of-type(2) {
		margin-top: 30rpx;
	}

	.add_r>view text {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		width: 480rpx;
	}

	.add_r>view image {
		width: 36rpx;
		height: 36rpx;
		margin-left: 50rpx;
	}

	.add_l {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 8rpx;
	}

	.add_l>view {
		width: 44rpx;
		height: 26rpx;
		background: #D6FFF5;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #109C7A;
	}

	.add_l>text {
		font-size: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
	}

	.topbox {
		box-sizing: border-box;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.cancelbox {
		background: #FFFFFF;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		box-sizing: border-box;
		width: 690rpx;
		padding: 30rpx;
		position: relative;
		z-index: 5;
	}

	.cancelbox text:nth-of-type(1) {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.call {
		/* width: 124rpx !important;
		height: 44rpx; */
		background: #FFFFFF;
		border: 1rpx solid #EEEEEE;
		border-radius: 22rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		padding: 4rpx 0;
		/* 	position: absolute;
		right: 30rpx; */
	}

	.loc {
		display: flex;
		align-items: center;
	}

	.loc text {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F45E14;
		margin-left: 8rpx;
	}

	.plus {
		width: 630rpx;
		height: 88rpx;
		position: relative;
		margin-left: 30rpx;
		margin-top: 6rpx;
		display: flex;
		align-items: flex-end;
	}

	.plus>view {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #4D2F12;
		position: relative;
		z-index: 2;
		margin-bottom: 20rpx;
		margin-left: 14rpx;
	}

	.plus>view image {
		width: 30rpx;
		height: 30rpx;
	}

	.plus>view text {
		margin-left: 6rpx;
	}

	.plus>view text:nth-of-type(1) {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #4D2F12;
	}

	/* 	<view class="plus">
		<image src="../static/icon_148@2x.png" mode=""></image>
			<view class="">
				<image src="../static/vip.png" mode=""></image>
				<text>成为plus会员</text>
				<text>| 可为您节省￥15.08</text>
			</view>
	</view> */

	.plus>image {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.realpay {
		width: 630rpx;
		margin-left: 30rpx;
		margin-top: 60rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.realpay>view {
		display: flex;
		align-items: baseline;
	}

	.realpay>view:nth-of-type(1) text {
		font-size: 34rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F83535;
	}

	.realpay>view:nth-of-type(2) text {
		font-size: 40rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.youhui {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 630rpx;
		margin-left: 30rpx;
		margin-top: 40rpx;

	}

	.youhui>view {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.youhui>view image {
		width: 28rpx;
		height: 30rpx;
		margin-right: 14rpx;
	}

	.youhui>text {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F83535;
	}

	.openline {
		width: 630rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40rpx;
		background: #FAFAFA;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
	}

	.openline>image {
		width: 16rpx;
		height: 10rpx;
	}

	.goodsbg>view {
		height: 170rpx;
		border-bottom: 1rpx solid #EEEEEE;
		width: 630rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		position: relative;
	}

	.priceipt {
		position: absolute;
		width: 174rpx;
		height: 50rpx;
		background: #FFFFFF;
		border-radius: 25rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F45E14;
		right: 0rpx;
		bottom: 10rpx;
	}

	.goodsbg>view:last-child {
		border-bottom: none;
	}

	.goodsbg>view>image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 12rpx;
		margin-right: 16rpx;
	}

	.itemrules {
		display: flex;
		flex-direction: column;

	}

	.itemrules>text {
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 30rpx;
	}

	.itemrules>view {
		display: flex;
		align-items: center;
	}

	.itemrules>view>text:nth-of-type(1) {
		width: 280rpx;
		font-size: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}

	.itemrules>view>text:nth-of-type(2) {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		text-decoration: line-through;
		color: #999999;
		line-height: 6rpx;
		margin-left: 20rpx;
		margin-right: 30rpx;
	}

	.itemrules>view>text:nth-of-type(3) {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}

	.itemrules {}

	/* 	<view class="">
		<image src="" mode=""></image>
		<view class="itemrules">
			<view class=""><text>饱满海南香蕉饱满海南香蕉</text><text>￥18.0</text><text>￥18.0</text></view>
			<text>香甜软糯，回味无穷，一口爱上</text>
			<text>x1</text>
		</view>
	</view> */

	.recive {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 120rpx;
		z-index: 99;
		background: linear-gradient(64deg, #2BCCA5, #22B591);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
	}

	.tworecive {
		background: #FFFFFF;
	}

	.tworecive>view {
		width: 290rpx;
		height: 90rpx;
		background: #FFFFFF;
		border: 1rpx solid #CCCCCC;
		border-radius: 10rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.tworecive>view:nth-of-type(2) {
		color: #FFFFFF;
		width: 260rpx;
		background: linear-gradient(64deg, #2BCCA5, #22B591);
		margin-left: 30rpx;
	}

	.beizu {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
		padding: 30rpx;
		line-height: 40rpx;
	}

	.beizu>view {
		display: flex;
		justify-content: space-between;
	}

	.beizu>view text:nth-of-type(2) {
		color: #FC9448;
	}

	.beizu>view:nth-of-type(2) {
		margin-top: 16rpx;
	}

	.buyer {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 30rpx;
		position: relative;
	}

	.buyer>image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.buyer>view {
		flex: 1;
	}

	.buyer>view>view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.buyer>view>view:nth-of-type(1) {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
	}

	.buyer>view>view:nth-of-type(2) {
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
		line-height: 42rpx;
	}

	.buyer>view>view:nth-of-type(2) text:nth-of-type(2) {
		color: #F83535;
	}

	.usualtitle {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 30rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.usualtitle text:nth-of-type(2) {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F45E14;

	}

	.user {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.user>view {
		display: flex;
	}

	.user text:nth-of-type(1) {
		width: 140rpx;
		white-space: nowrap;
	}

	.hong {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #F83535;
	}

	.hui {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #666666;
		width: 500rpx;
	}

	.listbg {
		width: 690rpx;
		margin-left: 30rpx;
		position: relative;
		z-index: 3;
		padding-top: 50rpx;
	}

	.listbg>view {
		width: 690rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	page {
		background: #F5F5F5;
	}

	.ipts {
		width: 620rpx;
		height: 380rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}

	.linear {
		width: 750rpx;
		height: 280rpx;
		background: linear-gradient(180deg, #109C7A 0%, #F5F5F5 100%);
		position: fixed;
		top: 0;
	}

	.ipts>text {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		line-height: 34rpx;
	}

	.ipts input {
		width: 572rpx;
		height: 120rpx;
		background: #FFFFFF;
		border: 1rpx solid #CCCCCC;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding-left: 16rpx;
		margin-bottom: 42rpx;
		margin-top: 46rpx;
	}

	.playbtn {
		width: 100%;
		display: flex;
		height: 90rpx;
		border-top: 1rpx solid #EEEEEE;
	}

	.playbtn>view {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #999999;
		display: flex;
		width: 50%;
		height: 100%;
		align-items: center;
		justify-content: center;
	}

	.playbtn>view:nth-of-type(2) {
		border-left: 1rpx solid #EEEEEE;
		color: #F31E1E;
	}
</style>
